<script setup></script>

<template>
  <div>
    <h1>Reg</h1>
    <div class="mb-4">
      <el-button type="primary">Primary</el-button>
      <el-button type="success" @click="btn2">Success</el-button>
    </div>
    <p v-for="(artical, index) in list" :key="'artical' + index">
      {{ artical.title }}
    </p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const list = ref([])
const btn2 = () => {
  const path = 'https://apis.tianapi.com/wxnew/index?key=c65cff44e82fc3b1d27622e80e0a1b6c&num=10'
  //  回调地狱代码
  axios
    .get(path) // 线程结束
    .then((response) => {
      //  在启动一个线程
      if (response.data.code === 200) list.value = response.data.result.list
      console.log(1)
      axios
        .get(path) // 线程结束
        .then((response) => {
          //  在启动一个线程
          if (response.data.code === 200) list.value = response.data.result.list
          console.log(3)
          axios
            .get(path) // 线程结束
            .then((response) => {
              //  在启动一个线程
              if (response.data.code === 200) list.value = response.data.result.list
              console.log(4)
              axios
                .get(path) // 线程结束
                .then((response) => {
                  //  在启动一个线程
                  if (response.data.code === 200) list.value = response.data.result.list
                  console.log(5)
                })
                .catch((error) => {
                  console.log(error)
                })
            })
            .catch((error) => {
              console.log(error)
            })
        })
        .catch((error) => {
          console.log(error)
        })
    })
    .catch((error) => {
      console.log(error)
    })

  console.log(2)
}
</script>
